<template>
  <view>
    <u-button @click="show = true">选择地区</u-button>

    <u-picker
      v-model="selectedArea" 
      :columns="addressColumns" 
      @confirm="onConfirmArea"  
      :show="show" 
      title="选择地区" 
    />
    <text style="margin-top: 20px;">选择的地区: {{ selectedArea}}</text> <!-- 显示选中的地区 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,  // 控制选择器的显示状态
      selectedArea: [],  // 选中的地区数组
      addressColumns: [],  // 存储省、市、区的数据
      addressData: {
        '省1': {
          cities: {
            '市1': ['区1', '区2'],
            '市2': ['区3', '区4'],
          },
        },
        '省2': {
          cities: {
            '市3': ['区5', '区6'],
            '市4': ['区7', '区8'],
          },
        },
      },
    };
  },
  created() {
    this.initializeColumns();  // 初始化选择项
  },
  methods: {
    initializeColumns() {
      const provinces = Object.keys(this.addressData); // 获取省份
      const cities = Object.keys(this.addressData[provinces[0]].cities); // 获取第一个省的城市
      const districts = this.addressData[provinces[0]].cities[cities[0]]; // 获取第一个城市的区

      this.addressColumns = [provinces, cities, districts]; // 初始化列
      this.selectedArea = [provinces[0], cities[0], districts[0]]; // 设置默认选中值
    },
    onConfirmArea(value) {
      this.selectedArea = value;  // 更新选中地区
      this.show = false; // 关闭选择器
    },
    changeHandler(e) {
      const { columnIndex, index, picker } = e;
      if (columnIndex === 0) {
        // 更新第二列（市）
        const province = this.selectedArea[0];
        const cities = Object.keys(this.addressData[province].cities);
        picker.setColumnValues(1, cities);

        // 默认选择第一个城市的区
        const firstCity = cities[0];
        const districts = this.addressData[province].cities[firstCity];
        picker.setColumnValues(2, districts);
        this.selectedArea[1] = cities[0]; // 更新第二列的选中值
        this.selectedArea[2] = districts[0]; // 更新第三列的选中值
      } else if (columnIndex === 1) {
        // 更新第三列（区）
        const province = this.selectedArea[0];
        const city = this.selectedArea[1];
        const districts = this.addressData[province].cities[city];
        picker.setColumnValues(2, districts);
        this.selectedArea[2] = districts[0]; // 默认选择第一个区
      }
    },
  },
};
</script>

<style>
/* 自定义样式 */
u-button {
  margin-bottom: 20px; /* 按钮与文本之间的间距 */
}
</style>